<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/header.jsp" %>

<style>
    #order-detail {
        border: 1px #b3c6e2 solid
    }

    #order-detail-address {
        margin: 20px 20px;
        padding-bottom: 10px;
        border-bottom: 1px #d2d7db solid;
    }

    #order-detail-orderInformation {
        margin-left: 20px;
    }

    #order-detail-table {
        border: 1px #dddddd solid;
        margin: 15px 20px;
    }

    #order-detail-table-tbody > td {
        border-right: 1px #dddddd solid;
    }

    #order-detail-table-tbody-goodsName{
        color: #4065c5;
    }

    #order-detail-table-tbody-goodsName:hover{
        color: #f08c52;
        text-decoration: underline #f08c52;
    }

    #order-detail-table-tbody:not(:first-child){
        text-align: center;
    }

    #order-detail-table-thead > td{
        text-align: center;
    }
    #order-pay-information{
        float: right;
        margin-right: 448px;
    }
    #order-pay-information > ul > li{
        list-style: none;
    }

    #order-pay-information > ul > li > span{
        display: inline-block;
        width: 60px;
        margin-right: 40px;
        margin-top: 10px;
    }

</style>

<div id="order-detail" style="height: 400px">
    <div id="order-detail-address">
        <h5 style="display: inline">收获地址：</h5>
        <span>${orderDetail.address.addrReceiver} ,
             ${orderDetail.address.addrTel} , ${orderDetail.address.addrProvince}
            ${orderDetail.address.addrCity} ${orderDetail.address.addrArea} ${orderDetail.address.addrContent}</span>
    </div>

    <div id="order-detail-orderInformation">
        <h5>订单信息</h5>
        <div style="margin-left: 60px">
            <span>订单编号</span>
            <span>${orderDetail.orderCode}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span>创建时间</span>
            <span>${orderDetail.orderDate}</span>
        </div>
    </div>

    <table id="order-detail-table">
        <tr id="order-detail-table-thead" style="background-color: #eaf2fe; height: 40px">
            <td>宝贝</td>
            <td style="width: 100px">状态</td>
            <td style="width: 100px">单价</td>
            <td style="width: 100px">数量</td>
        </tr>
        <tr id="order-detail-table-tbody">
            <td>
                <div style="width: 260px;height: 80px;display: flex;margin-top: 10px">
                    <img src="${pageContext.request.contextPath}/${orderDetail.goodsPic}" style="width: 50px;height: 50px;display: block">
                    <div style="width: 196px; margin-top: 5px">
                        <a style="display: block" id="order-detail-table-tbody-goodsName" href="${pageContext.request.contextPath}/goods/goodsDetail.action?goods_id=${orderDetail.goodsId}">${orderDetail.goodName}</a>
                        <div style="margin-top: 5px">${orderDetail.contentName}</div>
                    </div>
                </div>
            </td>
            <td>
                <c:if test="${orderDetail.orderStatus == 0}">待支付</c:if>
                <c:if test="${orderDetail.orderStatus == 1}">待发货</c:if>
                <c:if test="${orderDetail.orderStatus == 2}">已发货</c:if>
            </td>
            <td>
                ￥${orderDetail.goodsPrice}
            </td>

            <td>
                ${orderDetail.orderSales}
            </td>
        </tr>
    </table>

    <div id="order-pay-information">
        <ul>
            <li>
                <span>商品总价:</span>
                <span>￥${orderDetail.orderSales * orderDetail.goodsPrice}</span>
            </li>
            <li>
                <span>￥运费:</span>
                <span>${orderDetail.goodsPostalfee}</span>
            </li>

            <li>
                <span>实付款:</span>
                <span style="color: #ec622b;font-size: 20px">￥${orderDetail.orderSales * orderDetail.goodsPrice + orderDetail.goodsPostalfee}</span>
            </li>
        </ul>
    </div>

</div>